import React from 'react';
import './index.scss';
import classNames from 'classnames';

const Loading = (props) => {
    let classname = classNames(
        'loading',
        props.className
    );

    return (
        <div className={classname}>
            <div className="loading-bd">
                <div className="sk-circle">
                    <div className="sk-circle1 sk-child"></div>
                    <div className="sk-circle2 sk-child"></div>
                    <div className="sk-circle3 sk-child"></div>
                    <div className="sk-circle4 sk-child"></div>
                    <div className="sk-circle5 sk-child"></div>
                    <div className="sk-circle6 sk-child"></div>
                    <div className="sk-circle7 sk-child"></div>
                    <div className="sk-circle8 sk-child"></div>
                    <div className="sk-circle9 sk-child"></div>
                    <div className="sk-circle10 sk-child"></div>
                    <div className="sk-circle11 sk-child"></div>
                    <div className="sk-circle12 sk-child"></div>
                </div>
            </div>
        </div>
    );
}

export const loadingOn = () => {
    //  loading on
    let loading = document.querySelector('.loading');
    loading && (loading.style.display = 'block');
};

export const loadingOff = () => {
    //  loading off
    let loading = document.querySelector('.loading');
    loading && (loading.style.display = 'none');
};

export default Loading;
